<template>
  <div>
    <div class="top-tip" v-if="topTip">{{ topTip }}</div>
    <div class="searchbar">
      <div v-for="item in filterList" :key="item.id" class="filter-item">
        <div class="filter-tip">{{ item.tip }}</div>
        <el-input v-if="item.type == 'input'" v-model="item.value" :placeholder="item.placeholder || '请输入'" clearable @keyup.enter="search"> </el-input>
        <el-select v-model="item.value" :placeholder="item.placeholder || '请选择'" v-if="item.type == 'select'">
          <el-option v-for="option in item.data" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>
        <el-date-picker
          v-model="item.value"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="defaultTime"
          v-if="item.type == 'date'"
          style="width: 230px"
        />
      </div>
      <el-button class="search-btn" @click="search">搜索</el-button>
      <slot name="rightcontent"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  //顶部标题
  topTip: {
    type: String,
    default: ''
  },
  /**
   * 传过来的配置列表，根据type判断是输入框，下拉框，时间选择期等类型
   * 参数示例
   * {
   *    key： String
        type: String
        value: String || Number ,
        tip:  String || Number ,
        data: Arrary  //下拉框配置选项
      }
   */
  filterList: {
    type: Array as () => Array<any>,
    default: () => []
  }
})
const emit = defineEmits(['searchVal'])

const defaultTime = ref<[Date, Date]>([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])

const search = () => {
  const param: any = {}
  props.filterList.forEach((item) => {
    const key = item.key
    const value = item.value
    if (key === 'day') {
      if (value && value[0].$d && value[1].$d) {
        param['start_time'] = value[0]?.$d.getTime() / 1000 || ''
        param['end_time'] = value[1]?.$d.getTime() / 1000 || ''
      } else if (value) {
        param['start_time'] = value[0]?.getTime() / 1000 || ''
        param['end_time'] = value[1]?.getTime() / 1000 || ''
      } else {
        param['start_time'] = ''
        param['end_time'] = ''
      }
    } else {
      param[key] = value
    }
  })
  emit('searchVal', param)
}
</script>

<style lang="scss" scoped>
.top-tip {
  margin: 10px 0px;
}
.searchbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  .filter-tip {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .filter-item {
    margin: 5px 8px 0 0;
    .el-input,
    .el-select {
      width: 185px;
    }
  }
  .search-btn {
    margin: 5px 8px 0 0;
  }
}
</style>
